<template>
  <div class="acticle-box">
      <div class="left-content">
        <div class="divider">
          <div class="line"></div>
          <div class="date" v-if="isInOneDay(article.lastUpdate)">{{filterData(article.lastUpdate)}}</div>
        </div>
        <div class="title">{{ article.name }}</div>
        <div class="sub-desc">
          <span class="come" v-if="article.origin">来源 | {{ article.origin }}</span>
          <span class="anchor"
            >作者 |
            <span class="people" @click="toDetail">{{
              article.author
            }}</span></span
          >
          <span class="time">{{ formatDate(article.lastUpdate) }}</span>
        </div>
        <!-- 活动主题 -->
        <div class="theme-box">
          {{ article.summary }}
        </div>
        <div class="detail-box" v-html="article.content"></div>
        <!-- 标签 -->
        <div class="tags-box">
          <div
            class="tag"
            v-for="(item, index) of article.tags"
            :key="index"
            @click="tagToDetail(item)"
          >
            {{ item.name }}
          </div>
        </div>
        <!-- 你可能感兴趣 -->
        <Interested :uuid="article.uuid" />
      </div>
    </div>
</template>

<script>
// 可能感兴趣
import Interested from "@/components/Interested";
import moment from "moment";
moment.locale("zh-cn");

export default {
  components: {
    Interested
  },
  props: {
    article: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    // 点击作者跳转页面
    toDetail() {
      const params = {
        keywords: this.article.author,
        type: "anchor",
      };
      let routerJump = this.$router.resolve({
        name: "Search",
        query: params,
      });
      window.open(routerJump.href, "_blank");
    },
    // 处理时间
    formatDate(date) {
      let result
      const nowMM = new Date().getTime()
      if (nowMM - date < 604800000) {
        result = moment(date).startOf('hour').fromNow()
      } else {
        result = moment(date).format('ll')
      }
      return result  
    },
    isInOneDay(date) {
      var today = moment().startOf('hour');
      return moment(today).diff(moment(date),'hours' ) > 24;   
      // return moment(date).isSame(today, 'd');   
    },
    filterData(date) {
      let result
      const nowMM = new Date().getTime()
      if (nowMM - date < 604800000) {
        result = moment(date).startOf('hour').fromNow()
      } else {
        result = moment(date).format('ll')
      }
      return result    
    }
  }
}
</script>

<style lang="scss" scoped>

  .acticle-box {
    width: 1180px;
    margin: 0 auto;
    overflow: hidden;
    .left-content {
      width: 800px;
      float: left;
      margin-right: 40px;
      .divider {
        margin-top: 40px;
        margin-bottom: 100px;
        text-align: center;
        position: relative;
        .line {
          width: 800px;
          height: 15px;
          border-bottom: 1px dashed #D8D8D8;
          position: absolute;
          top: 0;
          left: 0;
        }
        .date {
          padding: 0 16px;
          height: 32px;
          line-height: 32px;
          background: #FFFFFF;
          border-radius: 4px;
          border: 1px solid #D8D8D8;
          font-size: 12px;
          
          font-weight: 400;
          color: #696969;
          display: inline-block;
          margin: 0 auto;
          position: relative;
          z-index: 99;
        }
      }
      .title {
        width: 100%;
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #272727;
        line-height: 42px;
        margin-bottom: 12px;
      }
      .sub-desc {
        font-size: 14px;
        
        font-weight: 400;
        color: #696969;
        line-height: 20px;
        margin-bottom: 24px;
        .come {
          margin-right: 24px;
        }
        .time {
          float: right;
        }
        .anchor {
          cursor: pointer;
          &:hover {
            .people {
              text-decoration: underline;
              color: #ff9195;
            }
          }
        }
      }
      .theme-box {
        width: 800px;
        padding: 20px 24px;
        box-sizing: border-box;
        border-radius: 4px;
        font-size: 16px;
        
        font-weight: 400;
        color: #696969;
        line-height: 28px;
        background: #f9f9f9 url("../../../assets/66.png") no-repeat;
        background-size: 102px 75px;
        background-position: 8px 8px;
        margin-bottom: 40px;
      }
      .detail-box {
        font-size: 16px;
        
        font-weight: 400;
        color: #272727;
        line-height: 28px;
        word-break: break-all;
        /deep/img {
          max-width: 100%;
          object-fit: contain;
        }
        /deep/pre {
          white-space: pre-wrap;
          word-wrap: break-word;
          word-break: break-all;
        }
      }
      .tags-box {
        overflow: hidden;
        margin-bottom: 52px;
        .tag {
          line-height: 18px;
          font-size: 12px;
          
          font-weight: 400;
          color: #696969;
          float: left;
          margin-right: 8px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #d8d8d8;
          padding: 7px 16px;
          cursor: pointer;
          &:hover {
            border: 1px solid #ff9195;
            color: #f96868;
          }
        }
        .fenxiang-box {
          float: right;
          font-size: 12px;
          
          font-weight: 400;
          color: #696969;
          .label {
            float: left;
            line-height: 32px;
          }
          .fenxiang-item {
            padding: 6px 12px;
            box-sizing: border-box;
            background: #f9f9f9;
            border-radius: 4px;
            line-height: 18px;
            margin-left: 8px;
            float: left;
            cursor: pointer;
            &:active {
              opacity: 0.8;
            }
            .icon {
              width: 20px;
              height: 20px;
              vertical-align: middle;
              margin-right: 4px;
            }
          }
        }
      }
    }
  }
</style>